<template>
  <div>
    <el-table :data="[row]" cell-class-name="tableColumn" size="small" border>
      <el-table-column label="code" prop="code" align="center" />
      <el-table-column label="名称" prop="name" align="center" />
      <el-table-column label="行业" prop="industry" align="center" />
      <el-table-column label="入场日期" prop="startDate" align="center" />
      <el-table-column label="离场日期" prop="endDate" align="center" />
      <el-table-column label="入场价格" prop="startPrice" align="center" />
      <el-table-column label="离场价格" prop="endPrice" align="center" />
      <el-table-column label="收益率" align="center" prop="yield" />
    </el-table>
    <v-chart autoresize :option="option" class="charts" />
  </div>
</template>

<script>
import { strToDate } from '@/utils'
import { calculateMA } from '@/utils/price'
export default {
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    priceList() {
      return this.row.priceList || []
    },
    option() {
      const { priceList, row } = this
      const { startDate, endDate } = row
      // 入场离场对象
      const startPrice = priceList.find(item => item.date === startDate)
      const endPrice = priceList.find(item => item.date === endDate)

      const data = priceList.map(item => {
        return [item.open_price, item.close_price, item.min_price, item.max_price, item.trade_money]
      })
      const dataMA5 = calculateMA(5, data)
      const dataMA10 = calculateMA(10, data)
      const dataMA20 = calculateMA(20, data)
      return {
        xAxis: {
          // 只显示月-日
          data: priceList.map((item) => strToDate(item.date))
        },
        yAxis: {},
        series: [
          {
            data,
            type: 'candlestick',
            markPoint: {
              data: [
                // 入场点
                {
                  name: 'mark',
                  coord: [strToDate(startDate), startPrice.open_price],
                  value: startPrice.open_price,
                  itemStyle: {
                    color: 'rgb(41,60,85)'
                  }
                },
                // 离场点
                {
                  name: 'mark',
                  coord: [strToDate(endDate), endPrice.open_price],
                  value: endPrice.open_price,
                  itemStyle: {
                    color: 'rgb(41,60,85)'
                  }
                }
              ]
            },
            label: {
              // show: true,
              position: 'top'
            },
            emphasis: {
              focus: 'series'
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang='scss' scopde>
.charts{
  width: 100%;
  height: 400px;
}
</style>
